<template>
  <div class="home">
    <div class="nav-list-box">
      <div v-for="item in linkList" class="item">
        <router-link :to="item.path">{{item.text}}</router-link>
      </div>
    </div>
    <div class="view">
      <router-view/>
    </div>
  </div>
</template>

<script>
	export default {
		name: "Home",
    data() {
      return {
        linkList: [
          {path: '/inputbox', text: "输入框"},
          {path: '/descriptions', text: "描述列表"},
          {path: '/table1', text: "表格1"},
          {path: '/layout1', text: "栅格布局1"},
          {path: '/layout2', text: "栅格布局2"},
          {path: '/table2', text: "表格动态表头"},
          {path: '/dialog', text: "二次封装弹框组件"},
          {path: '/drag', text: "拖拽组件"},
          {path: '/confirm', text: "确认框"},
          {path: '/form1', text: "弹框表单"},
          {path: '/topNavMenu', text: "顶栏菜单"},
          {path: '/elDialogTest', text: "弹框测试2"},
          {path: '/dialogTest3', text: "弹框测试3"},
          {path: '/dialogTest4', text: "弹框测试4"},
          {path: '/dialogTest5', text: "弹框测试5"},
          {path: '/dialogTest6', text: "弹框测试6"},
          {path: '/dialogTest7', text: "弹框测试7"},
          {path: '/dialogTest8', text: "弹框测试8"},
          {path: '/dialogTest9', text: "弹框测试9"},
          {path: '/selectTest', text: '下拉框'},
          {path: '/treeSelect', text: "树形下拉框"},
          {path: '/treedemo', text: '树组件'},
          {path: '/dragSort', text: '拖拽排序'},
          {path: '/treeNodeDrag', text: '树节点拖拽'},
          {path: '/radioTest', text: '单选按钮测试'},
          {path: '/dynamicTable', text: '动态表格'},
        ]
      }
    }
	}
</script>

<style scoped>

  .home {
    display: flex;
    height: 100%;
  }

  .nav-list-box {
    flex: 1;
    display: flex;
    width: 400px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    border-right: 1px solid green;
    height: 100%;
  }

  .item {
    padding: 10px;
    height: 20px;
  }

  .view {
    flex: 2;
    height: 100%;
    padding-left: 20px;
  }

</style>
